import styles from './index.scss'
import ReactSVG from 'react-svg'
import LongButton from '../LongButton/index.js'
const Tip = ({ titleBig, tipType, isSub, failType, buttonData, reDeal }) => {
  const clickEvent = () => {
    reDeal()
  }
  return (
    <div className={styles.tipContainer}>
      <div className={styles.svgContainer}>
        <ReactSVG
          src={`svg/Tip/${tipType}.svg`}
          svgClassName={isSub ? styles.svgSize + ' ' + styles.redSize: styles.svgSize}
        />
      </div>
      {(() => {
        switch (tipType) {
          case 'success':
            return (
              <div>
                <div className={styles.titleHeader}>{titleBig}</div>
                {
                  isSub ? <div>
                    <div className={styles.titleMiddle}>
                      后台见证人员正在为您审核资料...
                    </div>
                    <div className={styles.reloadSize}>
                      <ReactSVG
                        src="svg/Tip/reload.svg"
                        svgClassName={styles.reloadSvg}
                      />
                      <span>刷新修改结果</span>
                    </div>
                    </div> : null
                }
                <div className={styles.buttonContainer}>
                  <LongButton {...buttonData}></LongButton>
                </div>
              </div>
            )
          case 'fail':
            return (
              <div>
                <div className={styles.titleHeader}>{titleBig}</div>
                <div className={styles.content}>
                  <span style={{color:'orange'}}>原因是: &nbsp;&nbsp;</span>
                  {failType === 'security' ?  <span>
                    您的身份证信息公安不校验不通过,&nbsp;&nbsp;请确认姓名身份证号码等信息正确输入,&nbsp;&nbsp;
                    如依然无法通过校验请前往临柜办理。
                  </span>
                  : <span>身份证照片模糊/反光/过暗, &nbsp;&nbsp;请重新拍照后上传。
                  确保身份证的头像照及文字、号码清晰可辨,&nbsp;&nbsp;且四边圆角均拍摄在内,&nbsp;&nbsp;请置于光亮处垂直拍摄,&nbsp;&nbsp;切勿倾斜,&nbsp;&nbsp;勿手持拍照。</span>
                  }
                  <br/>
                  如有疑问请拨打客服电话<span style={{color:'#2579D4'}}>95523</span>或联系<span style={{color:'#2579D4'}}>在线客服</span>
                </div>
                <div className={styles.buttonContainer}>
                  <LongButton {...buttonData}></LongButton>
                  <div className={styles.reDeal} onClick={clickEvent}>
                    重新办理业务
                  </div>
                </div>
                
              </div>
            )
          case 'info':
            return (
              <div>
                { titleBig ? <div>
                  <div className={styles.titleHeader}>
                    {titleBig}
                  </div>
                  <div className={`${styles.titleInfo} ${styles.noWorkTime}`}>
                    当前为视频客服非工作时间, &nbsp;&nbsp;您目前可以预办理该业务,
                    或者您也可以在交易日<span style={{color:'orange'}}>8:30-22:00</span>来办理该业务。
                  </div>
                </div> : <div className={styles.titleInfo}>
                    您当前没有登陆信用资金账号, 请点击切换账号并
                    使用信用资金账号登陆后重新办理业务
                </div>
                }
                
              </div>
            )
          default:
            return null
        }
      })()}
    </div>
  )
}

export default Tip
